<template>
  <div class="app-container">
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="商品名称">
        <el-input v-model="listQuery.goodsName" />
      </el-form-item>

      <el-form-item label="下单日期" >
        <div class="block">
          <el-date-picker
            v-model="value"
            @change="change"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
          ></el-date-picker>
        </div>
      </el-form-item>

      <el-form-item label="省市区查询"  type="datetimerange">
        <div class="block" clear-icon>
          <areaSelect :data="listQuery"></areaSelect>
        </div>
      </el-form-item>

      <el-form-item label="合作商" v-if="showsupplierNumberList"> 
        <el-select v-model="listQuery.supplierNumber" placeholder="请选择" clearable  type="datetimerange" >
          <el-option
            v-for="item in supplierNumberList"
            :key="item.shortName"
            :label="item.shortName"
            :value="item.supplierNumber"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="getList(1)">搜索</el-button>
        <el-button plain @click="toExport()">excel导出</el-button>
        <el-button plain @click="seeExoprt()">查看导出</el-button>
      </el-form-item>
    </el-form>

    <el-table :inline="true" :data="tableData" border v-loading="listLoading">
      <el-table-column prop="goodsName" label="商品名称"></el-table-column>

      <el-table-column prop="productionFactory" label="厂家"></el-table-column>

      <el-table-column prop="specification" label="规格"></el-table-column>

      <el-table-column prop="approvalNumber" label="批准文号"></el-table-column>

      <el-table-column prop="supplierName" label="合作商"></el-table-column>

      <el-table-column prop="saleNum" label="销售"></el-table-column>

      <el-table-column prop="totalInventory" label="总库存"></el-table-column>

      <el-table-column prop="LockInventory" label="锁定库存"></el-table-column>

      <el-table-column prop="saleInventory" label="可销库存"></el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.pageNo"
      :limit.sync="listQuery.pageSize"
      @pagination="getList(null)"
    />
    <seeexcel ref="seeexcel" />
  </div>
</template>

<script>
import apigoodssale from "@/api/report/goodssale";
import apiPartner from "@/api/partner/partner";
import Pagination from "@/components/Pagination";
import seeexcel from "@/components/seeexcel/index"
import areaSelect from "@/views/component/areaSelect"
export default {
  name: "goodssale",
  components: { Pagination, seeexcel, areaSelect },
  data() {
    return {
      tableData: [],
      total: 0,
      listQuery: {
        pageNo: 1,
        pageSize: 5,
        goodsName: "", //商品名称
        startTime: "", //开始时间
        endTime: "" //结束时间
      },
      listLoading: true,
      supplierNumberList: [], //合作数据集合
      value: [],
      showsupplierNumberList:false, //是否显示合作商查询
    };
  },

  created() {
    //合作商
    if(this.$route.query.role == 'admin'){
      this.showsupplierNumberList = true
      apiPartner.getSupplierUserForSelect().then(res => {
        this.supplierNumberList = res.data.list;
      });
    }
   
    this.getList();
  },
  methods: {
    change(date) {
      if (date && date.length > 0) {
        this.listQuery.startTime = date[0];
        this.listQuery.endTime = date[1];
      } else {
        this.listQuery.startTime = "";
        this.listQuery.endTime = "";
      }
    },
    //搜索
    getList(pageNo) {
      if(this.listQuery?.areaId?.length>0){
        this.listQuery.province = this.listQuery.areaId[0]
        this.listQuery.city = this.listQuery.areaId[1] || ''
        this.listQuery.country = this.listQuery.areaId[2] || ''
      }
      this.listLoading = true;
      this.listQuery.pageNo = pageNo || this.listQuery.pageNo;
      apigoodssale.getList(this.listQuery).then(res => {
        this.tableData = res.data.page.list;
        this.total = res.data.page.total;
        this.listLoading = false;
      });
    },
    //导出
    toExport() {
      apigoodssale.report(this.listQuery).then(res => {
        this.$notify({
          title: "导出提示",
          message: res.data.tip,
          type: "success"
        });
      });
    },
    //查看导出
    seeExoprt() {
      this.$refs.seeexcel.open();
    }
  }
};
</script>

<style scoped>
</style>